<template>
	<view class='index'>
		<view class="index_swiper">
			<!-- <image src="../../static/index/banner_bj.png" class="banner_bj" mode=""></image> -->
			<swiper class="swiper" :autoplay="false" circular :indicator-dots='indicatorDots' indicator-color="#B5B5B5"
				indicator-active-color="#F9F9F9">
				<swiper-item v-for="bannerItem in bannerList" :key="bannerItem.id">
					<image class="imgBox" :src="bannerItem.imgUrl" mode="aspectFill" @click="jumpBanner(bannerItem)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="index_header_nav">
			<image class="h_image_01" src="/static/newsImg/index_notice.png" mode="widthFix"></image>
			<view class="header_line"></view>
			<view class="header_info">
				<swiper class="swiper" vertical circular :interval="2000" autoplay>
					<swiper-item v-for="(vs,vsindex) in newsList" :key="vsindex">
						<navigator :url="'/pages/index/notice/details?id='+vs.id" class="swiper-item ellipseHide" >{{vs.title}}</navigator>
					</swiper-item>
				</swiper>
			</view>
			<navigator url="/pages/index/notice/notice"  class="header_more">更多<image class="h_image_02" src="/static/newsImg/index_next.png" mode="widthFix"></image> </navigator>
		</view>
<!--        <view class="navigation">
        	<image class="chang" src="@/static/index/xianshidk_1.png" mode="" @click="navJump(0)"></image>
        </view> -->
<!-- 		<view class="navigation">
			<image class="tuan" src="@/static/index/xianshidk.png" mode="" @click="navJump(0)"></image>
			<image class="tuan" src="@/static/index/shenyegc.png" mode="" @click="navJump(1)"></image>
		</view> -->
		<view class="navigation_two">
			<!-- 神椰乐园 -->
			<navigator class="nt_l" hover-class="none" url="/pages/index/shenye-paradise/shenye-paradise">
				<image class="nt_l_img" src="/static/index/new_index/index_1.png" mode=""></image>
			</navigator>
			<view class="nt_r">
				<!-- 神椰 NFR -->
				<navigator hover-class="none" url="/pages/index/yoyo-cards/yoyo-cards">
					<image class="nt_r_img_01" src="/static/index/new_index/index_2.png" mode=""></image>
				</navigator>
				<!-- 精选活动 -->
				<navigator hover-class="none" url="/pages/index/selected-activities/selected-activities">
					<image class="nt_r_img_02" src="/static/index/new_index/index_3.png" mode=""></image>
				</navigator>
				
			</view>
		</view>
<!-- 		<view class="index_nav">
			<view class="nav_li " :class="{'on':navIndex == 1}" @click="navChangeIndex(1)">
				<view>神椰发售</view>
			</view>
			<view class="nav_li" :class="{'on':navIndex == 2}" @click="navChangeIndex(2)" >
				<view>预购日历</view>
			</view>
			
			<navigator class="nav_li"  hover-class="none" url="/pages/index/selected-activities/selected-activities">
				<view>精选活动</view>
			</navigator>
		</view> -->
<!-- 		<view class="index_content">
			<yoyo-cards v-if="navIndex == 1" ref="yoyoCards" @jumpDetails='jumpDetails' ></yoyo-cards>
			<offering-calendar v-if="navIndex == 2" ref="offeringCalendar" @jumpDetails='jumpDetails'></offering-calendar>
		</view> -->
		<navigator class="real_name_index" hover-class="none" url='/pages/login/login' v-if="!hasLogin">
			<text>登录后才可以购买数字权益卡</text>
			<view class="authentication">去登录</view>
		</navigator>

		<navigator class="real_name_index" hover-class="none" url='/pages/my/certification/certification'
			v-else-if="!isRealName">
			<text>您还未进行实名认证，请进行实名认证</text>
			<view class="authentication">去认证</view>
		</navigator>
		

		<rush-to-buy ref="rushToBuy"></rush-to-buy>
		<!-- 自定义tabBar -->
		<tabBar :pagePath="'/pages/index/index'" :num="0"></tabBar>
	</view>
</template>

<script>
	import wechat from '@/components/jweixin-module/wechat'
	import offeringCalendar from './offeringCalendar'  // 发售日历
	import yoyoCards from './yoyoCards'  // 精选yo卡
	const app = getApp()
	export default {
		components:{
			offeringCalendar,
			yoyoCards
		},
		data() {
			return {
				// more/loading/noMore
				indicatorDots: true, //是否展示轮播图面板指示点
				navIndex: 1,
				bannerList: [], //banner 列表
				isRealName: false, //判定是否实名
				hasLogin: false, //判定是否登录
				newsList:[],//公告消息列表
			}
		},
		onLoad() {
			this.bImgUrl = this.baseImgUrl
			this.share()

			// this.$queue.setData('token','Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjoicDRNSzR0RFNLMnhQK0o3QlVoM3ZQRmRyKzhMNk5tRWZMWHRnc2JKN3FNeldUbnpsNFVZVm1oZXpVTis5Y3hkUiJ9.aZ5yCENUaA-MMhe4V_ptaWDaG68cr2dOwkx8ZguQzmw')
			// this.$queue.setData('token','Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjoiR0Z4MHdVZjVHL281VENCSFhqZEQ3TXBqOTM3eTFVMHZxSUt0Vm9MMGRRcldUbnpsNFVZVm1oZXpVTis5Y3hkUiJ9.uEQ0SVehNAcSP1CqL6MN2_3CbudWDsK_VzKiRqI5E58')
			// this.$queue.setData('token','Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjoiMU1JbG8vMzliUXdoc1o5dWI2ek5leWRDSGxTaEorN2J1VnJJRmtpeG1NdldUbnpsNFVZVm1oZXpVTis5Y3hkUiJ9.ULfdgW-6oranoGwynkey9-FHvGTUMgvpA1bDRprfi9c')
			// this.$queue.setData('token','Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjoiRlBEbkg3REtWVGpibHRwRmI3ZSszNUlSdTc2dzEyWlVEUC9VRExHMDl2M1dUbnpsNFVZVm1oZXpVTis5Y3hkUiJ9.q0-S0eKc0VieL4w4no8JFNoqEQD752-ySge7NoMQ9QM')
			// this.$queue.setData('token','Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjoid0V4YkZJbmI5ajJHTkpPRENvcWE0U2hsM0ZLMGZydmYyVXUzbUhEQlhXeldUbnpsNFVZVm1oZXpVTis5Y3hkUiJ9.yUH4HBJpIpnlOy6i36z-pdFk7Kw26AKszSZNa9uri2o')
			
		},
		onShow() {
			// this.initialization()
			this.isRealName = this.$queue.getData('isRealName');
			if (this.$queue.getData('token') != undefined) {
				this.hasLogin = true
			} else {
				this.hasLogin = false
			}
			if (this.$queue.getData('isRealName') != undefined) {
				this.isRealName = this.$queue.getData('isRealName');
			} else {
				this.isRealName = false;
			}
			
			this.getBannerData() //获取 banner 图
			// 判定子组件是否全部挂在
			this.navIndex = 1
			this.$nextTick(()=>{
				this.$refs.rushToBuy.open()
				this.$refs.yoyoCards.initialization()
				this.getTop()
			})
			this.getAnnouncementLimitList() //新闻信息
		},
		onReady() {
			
		},
		methods: {
			getTop(){
				uni.pageScrollTo({ scrollTop: 0,duration: 0 });
			},
			// 新闻列表
			async getAnnouncementLimitList(){
				var res = await this.$api.getAnnouncementLimitList()
				this.newsList = res.result
			},
			jumpBanner(item){
				if(item.redirectUrl != ''){
					uni.navigateTo({
						url:item.redirectUrl
					})
				}
			},
			navJump(e){
				if(e==0){ //跳转限时任务
					uni.navigateTo({
						url:'./time-limited-task/time-limited-task'
					})
				}else{ //跳转神椰工厂
					uni.navigateTo({
						url:'/pages/syFactory/syFactory'
					})
				}
			},
			share() {
				wechat.scanQRJssdk(wx => {
					let data = {
						title: "神椰 Magic CoCo",
						desc: "欢迎来到神椰 Magic CoCo，享受更优的数字权益", // 分享描述
						link: this.domainName + '/pages/index/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: this.domainName + '/static/my/kyy.png', // 分享图标
						success: function(e) {
							// 设置成功
							console.log("设置成功", e);
						},
					}
					wx.updateAppMessageShareData(data)
					wx.updateTimelineShareData(data)
				})
			
			},

			async getBannerData() {
				const res = await this.$api.bannerList();
				this.bannerList = res.result
				if (this.bannerList.length <= 1) {
					this.indicatorDots = false
				} else {
					this.indicatorDots = true
				}
			},
			// 公共转跳卡详情
			async jumpDetails(item) {
				var res = await this.$api.equityCardIsShelves(item.id)	
				if(res.result){
					uni.navigateTo({
						url: '/pages/index/card-details/card-details?id=' + item.id
					})
				}else{
					this.$refs.popup.open()
				}
				// console.log(res)
			},
			async markClose(){

				if (this.navIndex == 1) {
					this.$refs.yoyoCards.initialization()
				} else {
					this.$refs.offeringCalendar.initialization()
				}
				this.$refs.popup.close()
			},
			async navChangeIndex(e) {
				// 1 精选yo卡列表 2发售日历卡
				this.navIndex = e
			},

		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)

			
			// if (this.navIndex == 1) {
			// 	uni.$emit('yoyoCardsFunc')
			// } else {
			// 	uni.$emit('offeringCalendarFunc')
			// }
		}

	}
</script>

<style scoped>
	page {
		background: #FCFCFD;
	}
	.index {
		padding-bottom: 60rpx;
	}

	.index_swiper {
		position: relative;
		padding-top: 24rpx;
	}

	.banner_bj {
		position: absolute;
		width: 100%;
		height: 82rpx;
		bottom: -8rpx;
		z-index: 2;
	}
	.imgBox{
		border-radius: 32rpx;
	}

	.index_swiper .swiper {
		/* width: 750rpx; */
		height: 360rpx;
		border-radius: 32rpx;
		margin: 0 30rpx;
	}
	
	 .index_swiper /deep/ .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		margin-right: 6rpx;
	  }
	 .index_swiper /deep/ .uni-swiper-dot-active {
			width: 24rpx;
			height: 8rpx;
			border-radius: 40px;
	  }
	  /* 1.12 new_add */
	.index_header_nav{
		width: 690rpx;
		height: 88rpx;
		background: url('/static/newsImg/index_bg.png') no-repeat;
		background-size: 100% 100%;
		margin: 30rpx auto 20rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
	}
	.h_image_01{
		width: 60rpx;
		height: 56rpx;
	}
	.header_line{
		width: 58rpx;
		height: 1px;
		background: #BAB9CB;
		transform: rotate(90deg);
	}
	.header_info{
		width: 440rpx;
		height: 64rpx;
		font-size: 32rpx;
		line-height: 64rpx;
		color: #171C27;
	}
	.header_info .swiper{
		width: 100%;
		height: 100%;
	}
	.h_image_02{
		width: 14rpx;
		height: 22rpx;
		margin-left: 4rpx;
	}
	.header_more{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100rpx;
		box-sizing: border-box;
		height: 100%;
		font-size: 30rpx;
		color: #171C27;
		padding-left: 20rpx;
	}
	/* end */
	.navigation{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx 0;
	}
    .navigation .chang{
    	width: 706rpx;
    	height: 180rpx;
    }
	.navigation .tuan{
		width: 330rpx;
		height: 180rpx;
	}
	.index_nav {
		width: 690rpx;
		height: 146rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}

	.index_nav .nav_li {
		position: relative;
		height: 146rpx;
		text-align: center;
		line-height: 146rpx;
		color: #999999;
		font-size: 38rpx;
		padding-left: 24rpx;
	}

	.index_nav .on {
		color: #222222;
		background-image: url('@/static/index/index-yuan.png');
		background-repeat: no-repeat;
		background-size: 48rpx 42rpx;
		background-position: 10rpx 44rpx;
		font-weight: 500;
	}

	.index_nav .nav_li>* {
		z-index: 3;
	}

	.index_nav .nav_li:nth-child(2) {
		margin:0 60rpx;
	}

	/* 弹窗信息 */
	.popup-box{
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-title{
		padding-top: 40rpx;
		padding-bottom: 34rpx;
		font-weight: 400;
		font-size: 38rpx;
		color: #000000;
	}
	.popup-content{
	    width: 460rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 30rpx;
		line-height: 40rpx;
		color: #333333;
	}
	.popup-button{
		border-top:2rpx solid #f0f0f0;
		width: 100%;
		margin-top: 40rpx;
		text-align: center;
		padding-top: 20rpx;
		font-weight: 400;
		font-size: 34rpx;		
		color: #0B87F2;
	}

	/* 去实名 */
	.real_name_index {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 16rpx 0 20rpx;
		box-sizing: border-box;
		width: 690rpx;
		margin: 0 auto;
		margin-top: 76rpx;
		font-size: 28rpx;
		height: 76rpx;
		background: #FFEBBF;
		border-radius: 24rpx;
	}
	
	.authentication {
		display: inline-block;
		padding: 10rpx 20rpx;
		background: #1A1A1A;
		border-radius: 200rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		background: #1A1A1A;
	}
	
	uni-swiper .uni-swiper-dot {
		display: inline-block;
		width: 14px !important;
		height: 4px !important;
		cursor: pointer;
		-webkit-transition-property: background-color;
		transition-property: background-color;
		-webkit-transition-timing-function: ease;
		transition-timing-function: ease;
		background: rgba(255, 255, 255, .3);
		border-radius: 5px !important
	}
	uni-swiper .uni-swiper-dot-active {
		width: 20px !important;
		background-color: #fff !important;
	
	}
	
	/*  */
	.navigation_two{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		padding:30rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
	}
	.nt_l_img{
		width: 362rpx;
		height: 304rpx;
	}
	.nt_r{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.nt_r_img_01,.nt_r_img_02{
		width: 308rpx;
		height: 142rpx;
	}
	.nt_r_img_01{
		
	}
</style>
